<template>
  <el-select v-model="_value" placeholder="请选择" clearable filterable :disabled="disabled">
    <el-option :label="item.cardName" :value="item.cardId" value-key="cardId" v-for="item in card" :key="item.cardId"></el-option>
  </el-select>
</template>

<script>
/**
 * hpro-select-card
 * @desc 会员卡选择控件（select）
 *
 * @param { array } value = 已选择的会员卡列表，用:value.sync，或者v-model绑定，格式[{cardId: 'id', cardName: 'cardName'}]
 */
export default {
  name: 'hpro-select-card',
  componentName: 'hpro-select-card',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: Object,
    disabled: Boolean
  },
  data () {
    return {
      card: []
    }
  },
  created () {
    this.getCard()
  },
  computed: {
    _value: {
      get () {
        const value = this.value
        if (value === undefined) {
          return undefined
        } else {
          return value.cardId
        }
      },
      set (val) {
        const card = this.card
        const value = card.find(element => element.cardId === val)
        this.$emit('change', value)
        this.$emit('update:value', value)
      }
    }
  },
  methods: {
    // 获取会员卡列表
    getCard () {
      let card = []
      let i = 1
      while (i < 10) {
        card.push({
          cardId: i,
          cardName: '会员卡' + i
        })
        i++
      }
      this.card = card
    }
  }
}
</script>
